<template>
  <div style="background-color: white">
    <carousel :carouselList="carouselList"></carousel>
    <!-- <el-carousel height="618px">
      <el-carousel-item v-for="(item, key) in 4" :key="key">
        <div>
          <el-image
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="cover"
            style="width: 100%; height: 618px"
          ></el-image>
        </div>
      </el-carousel-item>
    </el-carousel> -->
    <div
      class="index-body"
      style="
        padding-top: 30px;
        background-color: white;
        display: flex;
        padding-left: 90px;
        padding-right: 90px;
        padding-bottom: 50px;
      "
    >
      <!-- 左边 -->
      <div style="min-width: 260px; min-height: 1380px">
        <el-input
          placeholder="请输入内容"
          v-model="params.keywords"
          class="input"
          style="border-radius: 39px"
        >
          <template slot="suffix">
            <div
              style="height: 40px; display: flex; align-items: center"
              @click="getData"
            >
              <img
                src="@/assets/img/search.png"
                style="width: 20px; height: 20px"
                alt=""
              />
            </div>
          </template>
          <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
        </el-input>
        <div style="padding-left: 20px; margin-top: 24px">
          <div style="font-weight: bold; font-size: 24px; line-height: 48px">
            {{ $store.state.locale == "zh-cn" ? "热销产品" : "Hot-sale Products" }}
          </div>
          <!-- 产品类型 -->
          <div style="margin-top: 12px; width: 197px">
            <div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 197px;
                  margin-bottom: 20px;
                "
                @click="tapArrow(1)"
              >
                <div style="font-weight: bold">
                  {{ $store.state.locale == "zh-cn" ? "产品类型" : "Product Type" }}
                </div>
                <div style="width: 24px; height: 24px">
                  <img
                    v-if="classShow"
                    src="@/assets/img/arrow-bottom.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/img/arrow-top.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                </div>
              </div>
              <!-- v-if="item.show" -->
              <div v-if="classShow">
                <div style="margin-top: 16px" v-for="(t, key) in classify" :key="key">
                  <div style="display: flex; align-items: center">
                    <div
                      style="width: 18px; height: 18px"
                      @click="tapClassify(classify, t, key)"
                    >
                      <img
                        v-if="t.active"
                        src="@/assets/img/active.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                      <img
                        v-else
                        src="@/assets/img/default.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                    </div>
                    <div style="margin-left: 10px; font-size: 14px">{{ t.name }}</div>
                  </div>
                </div>
              </div>

              <div
                v-if="classShow"
                style="padding: 15px 0; width: 197px; border-bottom: 2px solid #000000"
              ></div>
            </div>
          </div>
          <!-- 用途 -->
          <div style="margin-top: 12px; width: 197px">
            <div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 197px;
                  margin-bottom: 20px;
                "
                @click="tapArrow(2)"
              >
                <div style="font-weight: bold">
                  {{ $store.state.locale == "zh-cn" ? "用途" : "Purpose" }}
                </div>
                <div style="width: 24px; height: 24px">
                  <img
                    v-if="useShow"
                    src="@/assets/img/arrow-bottom.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/img/arrow-top.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                </div>
              </div>
              <!-- v-if="item.show" -->
              <div v-if="useShow">
                <div style="margin-top: 16px" v-for="(t, key) in classifyData" :key="key">
                  <div style="display: flex; align-items: center">
                    <div
                      style="width: 18px; height: 18px"
                      @click="tapClassify(classifyData, t, key)"
                    >
                      <img
                        v-if="t.active"
                        src="@/assets/img/active.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                      <img
                        v-else
                        src="@/assets/img/default.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                    </div>
                    <div style="margin-left: 10px; font-size: 14px">{{ t.name }}</div>
                  </div>
                  <div v-if="t.children.length > 0" style="margin-left: 30px">
                    <div v-for="(it, i) in t.children" :key="i" style="margin-top: 16px">
                      <div style="display: flex; align-items: center">
                        <div
                          style="width: 18px; height: 18px"
                          @click="tapClassify(t.children, it, i)"
                        >
                          <img
                            v-if="it.active"
                            src="@/assets/img/active.png"
                            style="width: 18px; height: 18px"
                            alt=""
                          />
                          <img
                            v-else
                            src="@/assets/img/default.png"
                            style="width: 18px; height: 18px"
                            alt=""
                          />
                        </div>
                        <div style="margin-left: 10px; font-size: 14px">
                          {{ it.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                v-if="useShow"
                style="padding: 15px 0; width: 197px; border-bottom: 2px solid #000000"
              ></div>
            </div>
          </div>
          <!-- 性别 -->
          <div style="margin-top: 12px; width: 197px">
            <div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 197px;
                  margin-bottom: 20px;
                "
                @click="tapArrow(3)"
              >
                <div style="font-weight: bold">
                  {{ $store.state.locale == "zh-cn" ? "性别" : "Sex" }}
                </div>
                <div style="width: 24px; height: 24px">
                  <img
                    v-if="sexShow"
                    src="@/assets/img/arrow-bottom.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/img/arrow-top.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                </div>
              </div>

              <div v-if="sexShow">
                <div style="margin-top: 16px" v-for="(t, key) in sexData" :key="key">
                  <div style="display: flex; align-items: center">
                    <div
                      style="width: 18px; height: 18px"
                      @click="tapClassify(sexData, t, key)"
                    >
                      <img
                        v-if="t.active"
                        src="@/assets/img/active.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                      <img
                        v-else
                        src="@/assets/img/default.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                    </div>
                    <div style="margin-left: 10px; font-size: 14px">{{ t.name }}</div>
                  </div>
                </div>
              </div>

              <div
                v-if="sexShow"
                style="padding: 15px 0; width: 197px; border-bottom: 2px solid #000000"
              ></div>
            </div>
          </div>
          <!-- 材质 -->
          <div style="margin-top: 12px; width: 197px">
            <div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 197px;
                  margin-bottom: 20px;
                "
                @click="tapArrow(4)"
              >
                <div style="font-weight: bold">
                  {{ $store.state.locale == "zh-cn" ? "材质" : "Texture of material" }}
                </div>
                <div style="width: 24px; height: 24px">
                  <img
                    v-if="materialShow"
                    src="@/assets/img/arrow-bottom.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/img/arrow-top.png"
                    style="width: 24px; height: 24px"
                    alt=""
                  />
                </div>
              </div>

              <div v-if="materialShow">
                <div style="margin-top: 16px" v-for="(t, key) in materialData" :key="key">
                  <div style="display: flex; align-items: center">
                    <div
                      style="width: 18px; height: 18px"
                      @click="tapClassify(materialData, t, key)"
                    >
                      <img
                        v-if="t.active"
                        src="@/assets/img/active.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                      <img
                        v-else
                        src="@/assets/img/default.png"
                        style="width: 18px; height: 18px"
                        alt=""
                      />
                    </div>
                    <div style="margin-left: 10px; font-size: 14px">{{ t.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div style="padding-bottom: 50px; position: relative; width: 100%">
        <div style="margin-left: 38px; display: flex; flex-wrap: wrap">
          <div
            @click="detail(item.id)"
            style="
              cursor: pointer;
              margin-right: 20px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-bottom: 40px;
            "
            class="goods"
            v-for="(item, key) in info.data"
            :key="key"
          >
            <div style="width: 260px; height: 260px">
              <el-image
                style="width: 260px; height: 260px"
                :src="item.image_first"
                fit="cover"
              ></el-image>
            </div>
            <div
              style="
                margin-top: 20px;
                font-weight: bold;
                font-size: 16px;

                color: #000000;
                overflow: hidden;
                width: 260px;
                text-align: center;
              "
            >
              {{ item.title }}
            </div>
            <div
              style="font-size: 14px; font-weight: 400; color: #000000; line-height: 34px"
            >
              {{ $store.state.locale == "zh-cn" ? "款号" : "Style number" }}：{{
                item.goods_sn
              }}
            </div>
          </div>
        </div>
        <div style="width: 100%; margin-top: 200px" v-if="info.data.length <= 0">
          <nodata></nodata>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 0;
          "
        >
          <el-pagination
            :page-size="12"
            background
            layout="prev, pager, next"
            :total="info.total"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from "@/components/carousel.vue";
import nodata from "@/components/nodata.vue";
import lines from "@/components/line.vue";
export default {
  components: {
    carousel,
    nodata,
    lines,
  },
  data() {
    return {
      searchVal: "",
      carouselList: [],
      classifyData: [],
      useShow: true, //用途的收缩隐藏
      classShow: true,
      sexShow: true,
      materialShow: true,
      classify: [
        {
          name: this.$store.state.locale == "zh-cn" ? "鞋类" : "Footwear",
          active: false,
          type: 1,
        },
        {
          name:
            this.$store.state.locale == "zh-cn" ? "服装配件类" : "Clothing Accessories",
          active: false,
          type: 1,
        },
      ],
      sexData: [
        {
          name: this.$store.state.locale == "zh-cn" ? "男" : "Men",
          active: false,
          type: 3,
        },
        {
          name: this.$store.state.locale == "zh-cn" ? "女" : "Women",
          active: false,
          type: 3,
        },
        {
          name: this.$store.state.locale == "zh-cn" ? "不限" : "Unlimited",
          active: false,
          type: 3,
        },
      ],
      materialData: [
        {
          name: this.$store.state.locale == "zh-cn" ? "织物" : "Textile",
          active: false,
          type: 4,
        },
        {
          name: "TPU",
          active: false,
          type: 4,
        },
        {
          name: this.$store.state.locale == "zh-cn" ? "橡胶" : "Rubber",
          active: false,
          type: 4,
        },
      ],
      params: {
        category_ids: [],
        keywords: "",
        limit: 12,
        page: 1,
        type: [],
        sex: [],
        material: [],
      },
      info: {
        current_page: 1,
        data: [],
        last_page: "",
        per_page: "",
        total: 0,
      },
    };
  },
  computed: {
    language() {
      return this.$store.state.locale;
    },
  },
  watch: {
    $route(to, from) {
      console.log(23232);
      console.log(this.$route.query);
      this.reset();
      this.getHx();
      this.getData();
      // 在mounted函数执行的方法，放到该处
      // 加载页面数据的方法
    },
  },
  mounted() {
    this.getClassify();

    this.getBanner();
  },
  methods: {
    getBanner() {
      this.ajaxs("index/slides?translate=" + this.language, {
        data: { classify: 6 },
        success: (res) => {
          this.carouselList = res.data;
        },
      });
    },
    //重置数据
    reset() {
      this.params.category_ids = [];
      this.params.keywords = "";
      this.params.material = [];
      this.params.page = 1;
      this.params.type = [];
      this.classifyData.forEach((t) => {
        t.active = false;
        t.children.forEach((item) => {
          item.active = false;
        });
      });
      this.sexData.forEach((t) => {
        t.active = false;
      });
      this.materialData.forEach((t) => {
        t.active = false;
      });
      this.classify.forEach((t) => {
        t.active = false;
      });
    },
    getHx() {
      this.classifyData.forEach((item, i) => {
        if (item.id == this.$route.query.nameId) {
          this.params.category_ids.push(item.id);

          item.active = true;
        } else {
          item.active = false;
        }
      });
      this.$forceUpdate();
      // console.log(this.classifyData);
    },
    getData() {
      this.ajaxs("goods/index?translate=" + this.language, {
        data: this.params,
        success: (res) => {
          this.info = res.data;

          console.log(this.info);
        },
      });
    },
    getClassify() {
      this.ajaxs("category/index?translate=" + this.language, {
        success: (res) => {
          this.classifyData = res.data;
          for (let k = 0; k < this.classifyData.length; k++) {
            this.classifyData[k].type = 2;
            for (let j = 0; j < this.classifyData[k].children.length; j++) {
              this.classifyData[k].children[j].type = 2;
            }
          }
          this.getHx();
          this.getData();
          //console.log(this.classifyData);
        },
      });
    },
    //翻页
    currentChange(e) {
      this.params.page = e;
      this.getData();
    },
    tapArrow(i) {
      //1是产品类型 2是用途 3是性别 4是材质
      // item.show = !item.show;
      switch (i) {
        case 1:
          this.classShow = !this.classShow;
          break;
        case 2:
          this.useShow = !this.useShow;
          break;
        case 3:
          this.sexShow = !this.sexShow;
          break;
        case 4:
          this.materialShow = !this.materialShow;
          break;
      }
      this.$forceUpdate();
    },
    //商品详情
    detail(id) {
      this.$router.push("/index/product/detail/" + id);
    },
    tapClassify(data, t, key) {
      console.log(t);

      switch (t.type) {
        case 1:
          //产品类型
          this.params.type = [];
          // for (let i = 0; i < data.length; i++) {
          //   if (t.name == data[i].name) {
          //     data[i].active = !data[i].active;
          //   }

          //   if (data[i].active) {
          //     if (
          //       data[i].name ==
          //       (this.$store.state.locale == "zh-cn" ? "鞋类" : "Footwear")
          //     ) {
          //       this.params.type.push(1);
          //     }
          //     if (
          //       data[i].name ==
          //       (this.$store.state.locale == "zh-cn"
          //         ? "服装配件类"
          //         : "Clothing Accessories Category")
          //     ) {
          //       this.params.type.push(2);
          //     }
          //   }
          // }
          this.checkFun(data, t);
          break;

        case 3:
          //性别
          this.params.sex = [];
          // for (let i = 0; i < data.length; i++) {
          //   if (t.name == data[i].name) {
          //     data[i].active = !data[i].active;
          //   }

          //   if (data[i].active) {
          //     if (data[i].name == (this.$store.state.locale == "zh-cn" ? "男" : "Men")) {
          //       this.params.sex.push(1);
          //     } else if (
          //       data[i].name == (this.$store.state.locale == "zh-cn" ? "女" : "Women")
          //     ) {
          //       this.params.sex.push(2);
          //     } else {
          //       this.params.sex.push(0);
          //     }
          //   }
          // }
          // if (t.name == (this.$store.state.locale == "zh-cn" ? "男" : "Men")) {
          //   this.params.sex.push(1);
          // } else if (t.name == (this.$store.state.locale == "zh-cn" ? "女" : "Women")) {
          //   this.params.sex.push(2);
          // } else {
          //   this.params.sex.push(0);
          // }
          this.checkFun(data, t);
          break;
        case 4:
          //材质
          this.params.material = [];
          // for (let i = 0; i < data.length; i++) {
          //   if (t.name == data[i].name) {
          //     data[i].active = !data[i].active;
          //   }
          //   if (data[i].active) {
          //     this.params.material.push(data[i].name);
          //   }
          // }
          this.checkFun(data, t);
          break;
      }
      //用途
      if (t.type == 2) {
        let ids = [];
        let parentKey = "";
        this.params.category_ids.push(t.id);
        if (t.pid == 0) {
          console.log("parent");

          //选择父级
          for (let k = 0; k < data.length; k++) {
            if (data[k].name == t.name) {
              t.active = !t.active;
              if (!t.active) {
                this.params.category_ids = [];
                data[k].children.forEach((c) => {
                  c.active = false;
                });
              } else {
                data[k].children.forEach((c) => {
                  c.active = true;
                  console.log(c.id);
                });

                console.log(data[k].id);
              }
            }
          }

          // for (let k = 0; k < this.classifyData.length; k++) {
          //   if (t.name == this.classifyData[k].name) {
          //     parentKey = k;
          //   }

          //   for (let j = 0; j < this.classifyData[k].children.length; j++) {
          //     this.classifyData[parentKey].children[j].active = true;
          //   }
          // }

          // console.log(this.classifyData);
        } else {
          console.log("children");

          for (let k = 0; k < this.classifyData.length; k++) {
            for (let j = 0; j < this.classifyData[k].children.length; j++) {
              if (this.classifyData[k].children[j].name == t.name) {
                t.active = !t.active;

                // if (!t.active) {
                //   this.params.category_ids = [];
                // }
              }
            }
            let a = this.classifyData[k].children.every((s) => {
              return s.active == true;
            });
            if (a == true) {
              parentKey = k;
              this.classifyData[k].active = true;
            } else {
              this.classifyData[k].active = false;
            }
          }

          // for (let k = 0; k < data.length; k++) {
          //   if (data[k].name == t.name) {
          //     t.active = !t.active;
          //     if (!t.active) {
          //       this.params.category_ids = [];
          //     }
          //   }
          // }
        }
      }
      this.params.category_ids = [];
      for (let i = 0; i < this.classifyData.length; i++) {
        if (this.classifyData[i].active) {
          this.params.category_ids.push(this.classifyData[i].id);
        }
        for (let k = 0; k < this.classifyData[i].children.length; k++) {
          if (this.classifyData[i].children[k].active) {
            this.params.category_ids.push(this.classifyData[i].children[k].id);
          }
        }
      }
      console.log(this.params.category_ids);

      this.getData();
      this.$forceUpdate();
    },

    checkFun(data, item) {
      for (let k = 0; k < data.length; k++) {
        if (data[k].name == item.name) {
          item.active = !item.active;
        }
        if (data[k].active) {
          this.pushVal(data[k].type, data[k].name);
          // if (data[k].type == 1) {
          //   if (
          //     data[k].name == (this.$store.state.locale == "zh-cn" ? "鞋类" : "Footwear")
          //   ) {
          //     this.params.type.push(1);
          //   }
          //   if (
          //     data[k].name ==
          //     (this.$store.state.locale == "zh-cn"
          //       ? "服装配件类"
          //       : "Clothing Accessories Category")
          //   ) {
          //     this.params.type.push(2);
          //   }
          // }
          // if (data[k].type == 3) {
          //   if (data[k].name == (this.$store.state.locale == "zh-cn" ? "男" : "Men")) {
          //     this.params.sex.push(1);
          //   } else if (
          //     data[k].name == (this.$store.state.locale == "zh-cn" ? "女" : "Women")
          //   ) {
          //     this.params.sex.push(2);
          //   } else {
          //     this.params.sex.push(0);
          //   }
          // }
          // if (data[k].type == 4) {
          //   this.params.material.push(data[k].name);
          // }
        }
      }
    },
    pushVal(type, name) {
      if (type == 1) {
        if (name == (this.$store.state.locale == "zh-cn" ? "鞋类" : "Footwear")) {
          this.params.type.push(1);
        }
        if (
          name ==
          (this.$store.state.locale == "zh-cn" ? "服装配件类" : "Clothing Accessories")
        ) {
          this.params.type.push(2);
        }
      }
      if (type == 3) {
        if (name == (this.$store.state.locale == "zh-cn" ? "男" : "Men")) {
          this.params.sex.push(1);
        } else if (name == (this.$store.state.locale == "zh-cn" ? "女" : "Women")) {
          this.params.sex.push(2);
        } else {
          this.params.sex.push(0);
        }
      }
      if (type == 4) {
        this.params.material.push(name);
      }
    },
    //搜索
    tapSearch() {
      console.log(222);
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/index.css";
.active {
  font-size: 36px;
  font-weight: bold;
}
.normal {
  color: #bebebe;
  font-size: 32px;
  font-weight: bold;
}
/* /deep/ .el-carousel__indicators .is-active .el-carousel__button {
  width: 24px;
  height: 24px;
  background: #ffffff;

  border-radius: 50%;
}
/deep/ .el-carousel__indicators .el-carousel__button {
  background: rgba(255, 255, 255, 0.4);
  width: 24px;
  height: 24px;
  border-radius: 50%;
} */
.input /deep/ .el-input__inner {
  border-radius: 39px;
  border: 2px solid #000000;
  height: 40px;
}
.input /deep/ .el-input__suffix {
  margin-right: 15px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c91d1d;
}
.arrowTransform {
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(180deg);
}
.arrowTransformReturn {
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(0deg);
}
.goods:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.2);
}
.goods {
  transition: all 0.4s;
  padding: 20px;
  background-color: white;
  /* border-radius: 10px; */
}
</style>
